<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <!-- 样式 -->
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>

  <div class="wrap">

    <div class="play_wrap" id="player">

      <!-- 搜索歌曲 -->
      <div class="search_bar">
        <img src="images/player_title.png" alt="" />
        <!-- 搜索框 -->
        <input v-model="query" @keyup.enter="searchMusic();" type="text" autocomplete="off"/>
      </div>

      <div class="center_con">
        <!-- 搜索歌曲列表 -->
        <div class='song_wrapper' ref='song_wrapper'>
          <ul class="song_list">
            <!-- li循环 -->
            <li v-for="item in musicList">
              <!-- 点击放歌 -->
              <a @click="playMusic(item.id)" href="javascript:;"></a>
              <b>{{item.name}}</b>
              <span>
                <i @click="playMv(item.mvid)" v-if="item.mvid!=0" ></i>
              </span>
            </li>

          </ul>
          <img src="images/line.png" class="switch_btn" alt="">
        </div>

        <!-- 歌曲信息容器 -->
        <div class="player_con" :class="{playing:isPlay}">
          <img src="images/player_bar.png" class="play_bar" />
          <!-- 黑胶碟片 -->
          <img src="images/disc.png" class="disc autoRotate" />
          <img  :src="coverUrl==''?'./images/cover.png':coverUrl" class="cover autoRotate" />
        </div>


        <!-- 评论容器 -->
        <div class="comment_wrapper" ref='comment_wrapper'>
          <h5 class='title'>热门留言</h5>
          <div class='comment_list'>

            <!-- 热门留言循环 -->
            <dl v-for="item in hotComments">
              <dt>
                <!-- 用户图片 -->
                <img alt="" :src="item.user.avatarUrl" />
              </dt>
              <dd class="name">{{item.user.nickname}}</dd>
              <dd class="detail">
                {{item.content}}
              </dd>
            </dl>

          </div>

          <img src="images/line.png" class="right_line">
        </div>
      </div>

      <div class="audio_con">
        <audio @play="play" @pause="pause" :src="musicUrl" ref='audio' controls autoplay loop class="myaudio"></audio>
      </div>

      <!-- mv -->
      <div class="video_con" v-show="showVideo">
        <video ref='video' :src="mvUrl" controls="controls"></video>
        <div class="mask" @click="closeMv"></div>
      </div>

    </div>
  </div>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 官网提供的 axios 在线地址 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>


  <script type="text/javascript">
    // 设置axios的基地址
    axios.defaults.baseURL = 'https://autumnfish.cn';
    // axios.defaults.baseURL = 'http://localhost:3000';

    // 实例化vue
    let app=new Vue({
      el:"#player",
      data:{
        // 搜索关键字
        query:"",
        // 歌曲列表
        musicList:[],
        // 歌曲url
        musicUrl:"",
        // 是否正在播放
        isPlay:false,
        // 歌曲热门评论
        hotComments:[],
        // 歌曲封面地址
        coverUrl:'',
        // 显示视频播放
        showVideo:false,
        // mv地址
        MVUrl:""
      },
      // 方法
      /*
  1:歌曲搜索接口
    请求地址:https://autumnfish.cn/search
    请求方法:get
    请求参数:keywords(查询关键字)
    响应内容:歌曲搜索结果

  2:歌曲url获取接口
    请求地址:https://autumnfish.cn/song/url
    请求方法:get
    请求参数:id(歌曲id)
    响应内容:歌曲url地址
  3.歌曲详情获取
    请求地址:https://autumnfish.cn/song/detail
    请求方法:get
    请求参数:ids(歌曲id)
    响应内容:歌曲详情(包括封面信息)
  4.热门评论获取
    请求地址:https://autumnfish.cn/comment/hot?type=0
    请求方法:get
    请求参数:id(歌曲id,地址中的type固定为0)
    响应内容:歌曲的热门评论
  5.mv地址获取
    请求地址:https://autumnfish.cn/mv/url
    请求方法:get
    请求参数:id(mvid,为0表示没有mv)
    响应内容:mv的地址
*/
      methods: {

        // 搜索歌曲
        searchMusic(){
          if(this.query==0){
            return;
          }
          axios.get('/search?keywords='+this.query)
          .then(response=>{
            // 保存内容
            this.musicList=response.data.result.songs;
          })
          // 清空搜索
          this.query="";
        },

        // 播放歌曲
        playMusic(musicId){

          // 1.获取歌曲url
          axios.get('/song/url?id='+musicId).then(response=>{
            // 保留歌曲url地址
            this.musicUrl=response.data.data[0].url;
          })

          // 2.获取歌曲热门评论
          axios.get('/comment/hot?type=0&id='+musicId).then(response=>{
            // 保存热门评论
            this.hotComments=response.data.hotComments
          })

          // 3.获取歌曲封面
          axios.get('/song/detail?ids='+musicId).then(response=>{
            // 设置歌曲封面
            this.coverUrl=response.data.songs[0].al.picUrl;
          })

        },

        // audio的play事件
        play(){
          this.isPlay=true;
          // 清空mv的信息
          this.mvUrl="";
        },

        // audio的pause事件
        pause(){
          this.isPlay=false;
        },

        // 播放mv
        playMv(vid){
          if(vid){
            this.showVideo=true;
            // 获取mv信息
            axios.get('/mv/url?id='+vid).then(response=>{
              // 暂停歌曲播放
              this.$refs.audio.pause();
              // 获取mv地址
              this.mvUrl=response.data.data.url;
            })
          }
        },

        // 关闭mv界面
        closeMv(){
          this.showVideo=false;
          this.$refs.video.pause()
        },

        // 搜索历史记录中的歌曲
        historySearch(history){
          this.query=history;
          this.searchMusic();
          this.showHistory=false;
        }

      },
    })
  </script>


</body>

</html>